<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }


            .box2{
                background-color: yellow;
                width: 300px;
                height: 500px;
                border: 10px greenyellow solid;
            }
        </style>
    </head>
    <body>
        <button id="btn">点我一下</button>

        <hr />

        <div class="box1 box3 box4"></div>

        <script>
            /* 
                点击按钮后，修改box1的宽度
            */

            const btn = document.getElementById("btn")
            const box1 = document.querySelector(".box1")

            btn.onclick = function () {

                // 除了直接修改样式外，也可以通过修改class属性来间接的修改样式
                /* 
                    通过class修改样式的好处：
                        1. 可以一次性修改多个样式
                        2. 对JS和CSS进行解耦
                */
                // box1.className += " box2"

                // 元素.classList 是一个对象，对象中提供了对当前元素的类的各种操作方法
                /* 
                    元素.classList.add() 向元素中添加一个或多个class
                    元素.classList.remove() 移除元素中的一个或多个class
                    元素.classList.toggle() 切换元素中的class
                    元素.classList.replace() 替换class
                    元素.classList.contains() 检查class
                */
                // box1.classList.add("box2", "box3", "box4")
                // box1.classList.add("box1")

                // box1.classList.remove("box2")
                // box1.classList.toggle("box2")
                // box1.classList.replace("box1", "box2")

                let result = box1.classList.contains("box3")

                console.log(result)
                
            }
        </script>
    </body>
</html>
